<template>
  <div id="openChange">
    <p class="title">
      <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
        <use xlink:href="#iconcarousel" />
      </svg>
      <span>启动页</span>
    </p>
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="组件状态" name="1">
        <ul class="content-list">
          <li>
            <span class="mt0">广告状态：</span>
            <div>
              <el-radio v-model="styles.status" label="1">启用</el-radio>
              <el-radio v-model="styles.status" label="2">关闭</el-radio>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="组件样式" name="2">
        <ul class="content-list">
          <li>
            <span class="mt0">广告样式：</span>
            <div>
              <el-radio v-model="styles.type" label="1">全屏</el-radio>
              <el-radio v-model="styles.type" label="2">弹窗</el-radio>
              <div class="adv-style">
                <ul class="content-list">
                  <li>
                    <span style="width:100px">背景颜色：</span>
                    <div>
                      <colorSetting v-model="styles.colorBg" :originColor="styles.colorBg" initColor="#000"></colorSetting>
                    </div>
                  </li>
                  <li style="margin-bottom:0">
                    <span style="width:100px">透明度：</span>
                    <div style="width: 242px">
                      <edgeSetting v-model="styles.percent" unit="%" :max="100" :init="Number(styles.percent)"></edgeSetting>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames4" v-show="styles.type=='1'">
      <el-collapse-item title="定时关闭" name="4">
        <ul class="content-list">
          <li>
            <span class="mt0">关闭时间：</span>
            <div>
              <el-radio v-model="styles.times" label="3">3秒</el-radio>
              <el-radio v-model="styles.times" label="4">4秒</el-radio>
              <el-radio v-model="styles.times" label="5">5秒</el-radio>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames3">
      <el-collapse-item title="内容" name="3">
        <submitPic></submitPic>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState } from "vuex";
import submitPic from "../../comm/submitPic";
import colorSetting from "../../comm/colorSetting";
import edgeSetting from "../../comm/edgeSetting";
export default {
  name: "openChange",
  data() {
    return {
      bg: require("../../../assets/img/phone-bg.png"),
      activeNames1: "1",
      activeNames2: "2",
      activeNames3: "3",
      activeNames4: "4",
    };
  },
  computed: {
    ...mapState(["open"]),
    styles() {
      return this.open[0].styles;
    },
  },
  components: {
    submitPic,
    colorSetting,
    edgeSetting
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/css/base.less");
#openChange {
  padding: 20px;
  .title {
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eaec;
    color: @mainColor;
    font-weight: bold;
    > span {
      font-size: 18px;
      color: #333;
      margin-left: 10px;
    }
  }
  .adv-style {
    background-color: #f7f7f7;
    padding: 10px;
    margin-top: 20px;
    width: 350px;
  }
}
.mt0{
  margin-top: 0px !important;
}
</style>
